const TodoMain = (props) => {
    const { handleDone } = props
    return (
        <section className="main">
            <input
                id="toggle-all"
                className="toggle-all"
                type="checkbox"
            />
            <label htmlFor="toggle-all">Mark all as complete</label>
            <ul className="todo-list">
                {props.list.map(item=>
                    <li className={item.isDone ? 'completed' : ''} key={item.id} >
                        <div className="view">
                            <input className="toggle" type="checkbox" checked={item.isDone} onChange={()=>handleDone(item.id)} />
                            <label >{item.name}</label>
                            <button className="destroy"></button>
                        </div>
                    </li>
                )}
            </ul>
        </section>
  )
}
export default TodoMain
